<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue中的列表渲染</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--push()
			pop()
			shift()
			unshift()
			splice()
			sort()
			reverse()-->
			<template v-for="(item, index) of list" 
					 :key="item.id">
				<div>
					{{item.text}} ---- {{index}}
				</div>
				<span>
					{{item.text}}
				</span>
			</template>
			<hr>
			<div v-for="(item, key, index) of userInfo">
				{{item}} --- {{key}} --- {{index}}
			</div>
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					list: [{
						id: "001",
						text: "tom"
					}, {
						id: "002",
						text: "jack"
					}, {
						id: "003",
						text: "lucy"
					}],
					userInfo: {
						name: "jack",
						age: 28,
						sex: "male"
					}
				}
			})
		</script>
	</body>
</html>
